<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <!-- 解决ajax被spring security的CSRF拦截POST和PUT请求问题 -->
    <meta name="_csrf" th:content="${_csrf.token}">
    <meta name="_csrf_header" th:content="${_csrf.headerName}">
    <title>人员安排</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <link th:href="@{/css/toastr.min.css}" rel="stylesheet">

    <!--    <link th:href="@{/css/form-validation.css}" rel="stylesheet">-->
    <style>
        @media (min-width: 768px) {
            #un {
                color: var(--light);
                font-size: 1.1rem;
            }
        }


    </style>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            app()
        }
    </script>
</head>
<body>
<div th:replace="~{common :: top-nav}"></div>

<div class="container-fluid">
    <div class="row">
        <!--左侧导航-->
        <div class="col-2">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link" id="v-pills-home-tab" role="tab" aria-selected="false" th:href="@{/login/main}" sec:authorize="hasAnyRole('STUDENT','GUARD','MG','TESTER')">个人信息</a>
                <a class="nav-link" id="v-pills-messages-tab" role="tab" aria-selected="true" th:href="@{/access/accessInfo}" sec:authorize="hasAnyRole('GUARD','MG')">出入信息登记</a>
                <a class="nav-link" id="v-pills-settings-tab" role="tab" aria-selected="true" th:href="@{/access/allInformation}" sec:authorize="hasAnyRole('MG','ADMIN')">出入信息管理</a>
                <a class="nav-link" id="v-pills-health-tab" role="tab" aria-selected="true" th:href="@{/detected/findAll}" sec:authorize="hasAnyRole('MG','ADMIN')">核酸检测信息</a>
                <a class="nav-link active" id="v-pills-staff-tab" role="tab" aria-selected="true" th:href="@{/guard/arrangeStaff}" sec:authorize="hasAnyRole('MG')">人员安排</a>
                <a class="nav-link" id="v-pills-on-day-staff-tab" role="tab" aria-selected="true" th:href="@{/guard/onDayStaff}" sec:authorize="hasAnyRole('MG','ADMIN')">在班人员</a>
            </div>
        </div>
        <!-- 人员安排 -->
        <div class="col-10">
            <div class="tab-pane fade show active" id="v-pills-messages" role="tabpanel"
                 sec:authorize="hasAnyRole('MG')">
                <div class="row justify-content-md-center">
                    <div class="col-md-10 py-md-3">
                        <h3 class="mb-3">人员安排</h3>
                        <form class="needs-validation" method="post" novalidate>
                            <div class="form-row px-3 py-md-2 justify-content-end">
                                <div class="col-">
                                    <button class="btn btn-primary btn-sm px-1" type="button" onclick="setOthers()">反选</button>
                                    <button class="btn btn-primary btn-sm" type="button" onclick="setNo()">全不选</button>
                                </div>

                                <div class="col-md-2 px-1 text-sm-center">
                                    <button class="btn btn-primary btn-sm" type="button" onclick="clearOnDay()">清空当班状态</button>
                                </div>
                                <div class="col-md-3">
                                    <select id="inputState" class="form-control">
                                        <option value="0" selected>请选择值班种类</option>
                                        <option value="1">门岗检测员</option>
                                        <option value="2">核酸检测员</option>
                                    </select>
                                </div>
                                <div class="col- justify-content-end">
                                    <button class="btn btn-primary btn-sm" type="button" onclick="subStaff()">提交</button>
                                </div>
                            </div>
                            <small id="clearAll" class="form-text text-muted">
                                显示的为非当班人员！选择值班人员前建议先清除所有当班状态
                            </small>
                            <table class="table table-striped table-hover table-bordered">
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">工号</th>
                                    <th scope="col">姓名</th>
                                    <th scope="col">当班/不当班</th>
                                    <th scope="col">角色</th>
                                </tr>
                                </thead>
                                <tbody id="table_result">
                                <tr th:each="guard : ${guards}" th:if="${guard.role.role != 'ROLE_MG' and !guard.onDay}">
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" name="staff" type="checkbox" id="inlineCheckbox1" th:value="${guard.id}">
                                        </div>
                                    </td>
                                    <td th:text="${guard.no}"></td>
                                    <td th:text="${guard.username}"></td>
                                    <td th:text="${guard.onDay ? '当班' : '不当班'}"></td>
                                    <td th:text="${guard.role.role == 'ROLE_TESTER' ? '核酸检测人员' : '门岗检测人员'}"></td>
                                </tr>
                                </tbody>
                            </table>
                            <div id="barcon" name="barcon"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="error-msg" th:value="${param.error}">
        <input type="hidden" id="success-msg" th:value="${param.success}">
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script th:src="@{/js/jquery.slim.min.js}"><\/script>')</script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>


<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script th:src="@{/js/user-info.js}"></script>
<script th:src="@{/js/dashboard.js}"></script>
<script th:src="@{/js/toastr.min.js}"></script>
<script th:src="@{/js/form-validation.js}"></script>
</body>
<script type="text/javascript">
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function (e, xhr, options) {
        xhr.setRequestHeader(header, token);
    })

    //获取参数 提示是否成功
    function msg() {
        toastr.options.positionClass = 'toast-top-center';
        var errMsg = $('#error-msg').val();
        var succMsg = $('#success-msg').val();
        if (!isEmpty(succMsg)) {
            toastr.success('' + succMsg, '提示')
        } else if (!isEmpty(errMsg)) {
            toastr.error('' + errMsg, '错误')
        }
        return false
    }

    //调用方法
    function app() {
        msg()
        goPage(1, 20)
    }

    //反选
    function setOthers() {
        var loves = document.getElementsByName("staff");
        for (var i = 0; i < loves.length; i++) {
            if (loves[i].checked == false)
                loves[i].checked = true;
            else
                loves[i].checked = false;
        }
    }

    //全不选函数
    function setNo() {
        var loves = document.getElementsByName("staff");
        for (var i = 0; i < loves.length; i++) {
            loves[i].checked = false;
        }
    }

    //清楚所有人员的当班状态
    function clearOnDay() {
        $.ajax({
            url: "/guard/guardClear",
            type: "post",
            data: "{}",
            dataType: "json",
            success: function () {
                window.location.href = "/guard/arrangeStaff"
            }
        });
    }

    //进行提交  设置值班人员
    function subStaff() {
        var checkStaff = [];
        $("input[name='staff']:checked").each(function () {
            checkStaff.push($(this).val());
        });
        console.log(checkStaff);
        if (checkStaff.length === 0) {
            toastr.error("请先选择值班人员在提交");
            return false;
        }

        var optionVal = $("#inputState").val();
        console.log(optionVal);
        if (optionVal === '0') {
            toastr.error("请选择值班种类");
            return false;
        } else if (optionVal === '1') {
            $.ajax({
                url: "/guard/guardStaff",
                type: "post",
                dataType: "json",
                accept: "application/json",
                async: false,
                data: {
                    "checkStaff": checkStaff
                },
                success: function () {
                    window.location.href = "/guard/arrangeStaff"
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // 状态码
                    console.log(XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息
                    console.log(textStatus);
                }
            });

        } else if (optionVal === '2') {
            $.ajax({
                url: "/guard/testerStaff",
                type: "post",
                dataType: "json",
                accept: "application/json",
                async: false,
                data: {
                    "checkStaff": checkStaff
                },
                success: function () {
                    window.location.href = "/guard/arrangeStaff"
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // 状态码
                    console.log(XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息
                    console.log(textStatus);
                }
            });

        }


    }

    //分页
    function goPage(pno, psize) {
        var itable = document.getElementById("table_result");//通过ID找到表格
        var num = itable.rows.length;//表格所有行数(所有记录数)
        var totalPage = 0;//总页数
        var pageSize = psize;//每页显示行数
        //总共分几页
        if (num / pageSize > parseInt(num / pageSize)) {
            totalPage = parseInt(num / pageSize) + 1;
        } else {
            totalPage = parseInt(num / pageSize);
        }
        var currentPage = pno;//当前页数
        var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  1
        var endRow = currentPage * pageSize;//结束显示的行   10
        endRow = (endRow > num) ? num : endRow;
        //遍历显示数据实现分页
        for (var i = 1; i < (num + 1); i++) {
            var irow = itable.rows[i - 1];
            if (i >= startRow && i <= endRow) {
                irow.style.display = "table-row";
            } else {
                irow.style.display = "none";
            }
        }
        var tempStr = "";
        tempStr += "<div class='row justify-content-center py-md-3'>" +
            "<nav aria-label=\"AccessInfo For Student\">" +
            "<ul class=\"pagination\">"
        if (currentPage > 1) {
            tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
                "</li>";

            var jhs = 1;
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<li class=\"page-item\">" +
                    "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a>" +
                    "</li>";
                jhs++;
                if (jhs > 6) {
                    tempStr += "<li class=\"page-item disabled\">" +
                        "<a class=\"page-link\" >...</a>" +
                        "</li>";
                    break;
                }
            }
        } else {
            tempStr += "<li class=\"page-item disabled\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
                "</li>"
            var jhs = 1;
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<li class=\"page-item\">" +
                    "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a>" +
                    "</li>";
                jhs++;
                if (jhs > 6) {
                    tempStr += "<li class=\"page-item disabled\">" +
                        "<a class=\"page-link\" >...</a>" +
                        "</li>";
                    break;
                }
            }
        }
        if (currentPage < totalPage) {
            tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
                "</li>";
            for (var j = 1; j <= totalPage; j++) {
            }
        } else {
            tempStr += "<li class=\"page-item disabled\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
                "</li>";
            for (var j = 1; j <= totalPage; j++) {
            }
        }
        tempStr += "</ul>" +
            "</nav>" +
            "</div>"
        tempStr += "<div class='row justify-content-center'>当前第 " + pno + " 页 总计 " + totalPage + " 页 共 " + num + " 条记录</div>"
        document.getElementById("barcon").innerHTML = tempStr;
    }


</script>
</html>
